<template>
  <div class="nested-draggable">
    <draggable v-model="list" :group="{ name: 'g1', pull: true, put: true }" item-key="id" handle=".friend-item-left"
      @start="dragStart" @end="dragEnd" animation="150">
      <template #item="{ element: item, index }">
        <div>
          <div class="friend-item" :class="{
            'is-active': activeId === item.id,
            'is-dragging': isDragging
          }" @mouseenter="activeId = item.id" @mouseleave="activeId = null">
            <div class="friend-item-left" :style="{ paddingLeft: props.level * 10 + 20 + 'px' }">
              <div class="friend-index">{{ props.level + '-' + (index + 1) }}</div>
              <div class="friend-name" :title="item.name">{{ item.name }}</div>
            </div>
            <div v-show="activeId === item.id" class="friend-item-right">
              <el-icon :size="12" @click="handleDelete(item.id)">
                <Delete />
              </el-icon>
              <el-icon :size="12" @click="handleEdit(item)">
                <Edit />
              </el-icon>
            </div>
          </div>

          <div class="children-container" :class="{ 'can-drop': isDragging }">
            <NestedDraggable v-model="item.children" v-model:activeId="activeId" :level="props.level + 1"
              @delete="handleDelete" @edit="handleEdit" />
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import draggable from 'vuedraggable'
import NestedDraggable from './NestedDraggable.vue'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  activeId: {
    type: Number,
    default: null
  },
  level: {
    type: Number,
    default: 1
  }
})

const emits = defineEmits(['update:modelValue', 'update:activeId', 'delete', 'edit'])

const isDragging = ref(false)

const list = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  }
})

const activeId = computed({
  get() {
    return props.activeId
  },
  set(val) {
    emits('update:activeId', val)
  }
})

const dragStart = () => {
  isDragging.value = true
}

const dragEnd = () => {
  isDragging.value = false
}

const handleDelete = id => {
  emits('delete', id)
}

const handleEdit = data => {
  emits('edit', data)
}
</script>

<style lang="scss" scoped>
.nested-draggable {
  width: 100%;
}

.friend-item {
  display: flex;
  justify-self: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding: 8px;
  border-radius: 4px;
  background: rgba(#ccc, 0.2);
  font-size: 12px;
  color: #606266;

  &.is-active {
    background-color: $focusContent;
  }

  &.is-dragging {
    opacity: 0.5;
  }

  .friend-item-left {
    display: flex;
    align-items: center;
    width: 70%;
    padding: 0 10px;
    cursor: move;

    .friend-index {
      flex-shrink: 0;
      position: relative;
      width: 30px;
    }

    .friend-name {
      flex: 1;
      overflow: hidden;
      @include textEllipsis(12px, 1);
    }
  }

  .friend-item-right {
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 10px;
    width: 30%;

    .el-icon {
      margin-left: 5px;
      cursor: pointer;
    }
  }
}

.children-container {
  min-height: 10px;
  margin-left: 20px;
  border-radius: 4px;
  transition: all 0.3s;

  &.can-drop {
    background: rgba($mainColor, 0.1);
    border: 2px dashed $mainColor;
  }
}

// 拖拽时的样式
:deep(.sortable-drag) {
  opacity: 0.5;
}

:deep(.sortable-ghost) {
  opacity: 0.2;
  background: $mainColor;
}
</style>
